<template>
    <scroller class="page">
        <scroller :show-scrollbar="false" scroll-direction="horizontal" class="categories-list">
            <div class="categories-item" v-for="(item, index) in categories" @click="changeIndex(index)">
                <text class="categories-item-text" v-bind:class="[index === currentIndex ? 'categories-item-text-selected' : '' ]">{{ item.title }}</text>
            </div>
        </scroller>
        <!-- 首页 start -->
        <div v-if="currentIndex === 0">
            <slider class="slider" interval="3000" auto-play="true" :show-indicators="true">
                <div class="frame" v-for="item in banners">
                    <image class="image" resize="cover" :src="item.cover" @click="goInfo(item)"></image>
                </div>
                <indicator class="indicator"></indicator>
            </slider>
            <div class="box">
                <div class="box-left" v-if="models.length > 0">
                    <div class="box-left-1" v-if="models[0]" @click="clickModel(models[0])">
                        <image class="box-left-1" resize="cover" :src="models[0].cover"></image>
                        <div class="mask"></div>
                        <text class="box-text">{{ models[0].title }}</text>
                    </div>
                    <div class="box-left-2" v-if="models[1]" @click="clickModel(models[1])">
                        <image class="box-left-2" resize="cover" :src="models[1].cover"></image>
                        <div class="mask"></div>
                        <text class="box-text">{{ models[1].title }}</text>
                    </div>
                </div>
                <div class="box-right" v-if="models.length > 2">
                    <template v-for="(item, index) in models">
                        <div class="box-right-item" v-if="index > 1" @click="clickModel(item)">
                            <image class="box-right-item" resize="cover" :src="item.cover"></image>
                            <div class="mask"></div>
                            <text class="box-text">{{ item.title }}</text>
                        </div>
                    </template>
                </div>
            </div>
            <div class="groups">
                <div class="block-header">
                    <div class="block-title">
                        <text class="block-title-text-1">限时团购</text>
                        <text class="block-title-text-2"> / FLASH SALE</text>
                    </div>
                    <div class="text-indicator">
                        <text class="text-indicator-1">{{ groupSliderIndex + 1 }}</text>
                        <text class="text-indicator-2">/{{ groups.length }}</text>
                    </div>
                </div>
                <slider class="slider2" interval="5000" auto-play="true" @change="onGroupSliderChange">
                    <div class="frame2" v-for="(item, index) in groups" @click="goInfo(item)">
                        <image class="image2" resize="cover" :src="item.cover"></image>
                        <div class="group-info">
                            <div class="group-countdown">
                                <text class="group-countdown-text">{{ countDownList[index].day }}天{{ countDownList[index].hou }}时{{ countDownList[index].min }}分{{ countDownList[index].sec }}秒</text>
                            </div>
                            <div class="group-title">
                                <text class="group-title-text">{{ item.title }}</text>
                            </div>
                            <div class="group-price">
                                <text class="group-price-1">原价￥{{ item.salePrice }}</text>
                                <text class="group-price-2">￥{{ item.price }}</text>
                            </div>
                        </div>
                    </div>
                </slider>
            </div>
            <div class="new">
                <div class="block-header">
                    <div class="block-title">
                        <text class="block-title-text-1">新品专区</text>
                        <text class="block-title-text-2"> / NEW ARRIVAL</text>
                    </div>
                    <!-- <div class="text-indicator">
            <text class="text-indicator-1">{{ newSliderIndex + 1 }}</text>
            <text class="text-indicator-2">/{{ newProducts.length }}</text>
          </div> -->
                </div>
                <scroller :show-scrollbar="false" scroll-direction="horizontal" class="new-list">
                    <div class="new-item" v-for="item in newProducts" @click="goInfo(item)">
                        <image class="new-item-img" resize="cover" :src="item.cover"></image>
                        <div class="new-item-info">
                            <div class="new-item-title">
                                <text class="new-item-title-text">{{ item.title }}</text>
                            </div>
                            <div class="new-item-subtitle">
                                <text class="new-item-subtitle-text">{{ item.subtitle }}</text>
                            </div>
                            <div class="new-item-price">
                                <text class="new-item-price-text">￥{{ item.price }}</text>
                            </div>
                        </div>
                    </div>
                </scroller>
            </div>
            <div class="hot">
                <div class="block-header">
                    <div class="block-title">
                        <text class="block-title-text-1">热卖专区</text>
                        <text class="block-title-text-2"> / HOT SALE</text>
                    </div>
                    <!-- <div class="text-indicator">
            <text class="text-indicator-1">{{ newSliderIndex + 1 }}</text>
            <text class="text-indicator-2">/{{ newProducts.length }}</text>
          </div> -->
                </div>
                <div class="hot-list">
                    <div class="hot-item" v-for="(item, index) in hotProducts" @click="goInfo(item)">
                        <image class="hot-item-img" resize="cover" :src="item.cover"></image>
                        <div class="hot-item-title">
                            <text class="hot-item-title-text">{{ item.title }}</text>
                        </div>
                        <div class="hot-item-price">
                            <text class="hot-item-price-text">￥{{ item.price }}</text>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 首页 end -->
        <!-- 商品列表 start -->
        <div v-else>
            <image class="category-img" resize="contain" :src="categories[currentIndex].image"></image>
            <div class="product-list">
                <div class="product-item" v-for="item in list" @click="goInfo(item)">
                    <image class="product-item-img" resize="cover" :src="item.cover"></image>
                    <div class="product-item-content">
                        <div class="product-item-info">
                            <text class="product-item-title">{{ item.title }}</text>
                            <text class="product-item-price" v-if="item.minPrice">￥{{ item.minPrice }}起/盆</text>
                            <text class="product-item-price" v-else>￥{{ item.price }}/盆</text>
                        </div>
                        <div class="product-item-star" @click="subscribe(item)" v-if="!item.isSubscribe">
                            <text>☆</text>
                        </div>
                        <div class="product-item-star" @click="unsubscribe(item)" v-else>
                            <text>★</text>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 商品列表 end -->
        <!-- <Toolbar /> -->
        <Footer />
    </scroller>
</template>
<script>
// import Toolbar from '@/components/Toolbar';
import Footer from '@/components/Footer';
import utils from './utils/utils.js';
const modal = weex.requireModule('modal');
const event = weex.requireModule('event');
export default {
    name: 'App',
    components: {
        // Toolbar
        Footer
    },
    data() {
        return {
            currentIndex: 0,
            categories: [{ title: '推荐' }],
            banners: [],
            models: [],
            groups: [],
            countDownList: [],
            actEndTimeList: [],
            newProducts: [],
            hotProducts: [],
            groupSliderIndex: 0,
            // newSliderIndex: 0,
            products: [], // [[], [], []]
            list: []
        }
    },
    mounted() {
        // event.initData(JSON.stringify({ 'title': '首页' }), json => {
        // })
        this.getCategories();
        this.getBanners();
        this.getModel();
        this.getGroups();
        this.getNewProducts();
        this.getHots();
    },
    methods: {
        getCategories() {
            var url = '/yq/item/categories';
            var params = {};
            var success = res => {
                console.log("categories:", res);
                this.categories = this.categories.concat(res.info);
                this.products = new Array(this.categories.length);
            }
            var fail = res => {}
            utils.request(url, params, success, fail);
        },
        getBanners() {
            var url = '/yq/item/banners';
            var params = {};
            var success = res => {
                console.log("banners:", res);
                this.banners = res.info;
            }
            var fail = res => {
                modal.toast({
                    message: '获取数据失败',
                    duration: 1
                })
            }
            utils.request(url, params, success, fail);
        },
        getModel() {
            var url = '/yq/model';
            var params = {
                modelId: 1
            };
            var success = res => {
                console.log("model:", res);
                this.models = res.info.list;
            }
            var fail = res => {
                modal.toast({
                    message: '获取数据失败',
                    duration: 1
                })
            }
            utils.request(url, params, success, fail);
        },
        getGroups() {
            var url = '/yq/item/groups';
            var params = {};
            var success = res => {
                console.log("groups:", res);
                this.groups = res.info;
                this.countDowns();
            }
            var fail = res => {
                modal.toast({
                    message: '获取数据失败',
                    duration: 1
                })
            }
            utils.request(url, params, success, fail);
        },
        getNewProducts() {
            var url = '/yq/product/newProducts';
            var params = {};
            var success = res => {
                // console.log(res);
                this.newProducts = res.info;
            }
            var fail = res => {
                modal.toast({
                    message: '获取数据失败',
                    duration: 1
                })
            }
            utils.request(url, params, success, fail);
        },
        getHots() {
            var url = '/yq/product/hotProducts';
            var params = {};
            var success = res => {
                this.hotProducts = res.info;
            }
            var fail = res => {
                modal.toast({
                    message: '获取数据失败',
                    duration: 1
                })
            }
            utils.request(url, params, success, fail);
        },
        changeIndex(val) {
            this.currentIndex = val;
            if (val == 0) {
                return;
            }
            if (!this.products[val]) {
                var categoryId = this.categories[val].id;
                var url = '/yq/product/list';
                var params = {
                    categoryId: categoryId
                };
                var success = res => {
                    console.log(res);
                    this.products[val] = res.info;
                    this.list = this.products[val];
                    // for (var i = 0; i < this.list.length; i++) {
                    //     console.log("productId:" + this.list[i].id);
                    //     console.log("isSubscribe:" + this.list[i].isSubscribe);
                    //     console.log("=====");
                    // }
                }
                var fail = res => {
                    modal.toast({
                        message: '获取数据失败',
                        duration: 1
                    })
                }
                utils.request(url, params, success, fail);
            } else {
                this.list = this.products[val];
            }
        },
        subscribe(item) {
            if (!utils.checkToken()) {
                return;
            }
            var url = '/yq/user/subscribe';
            var params = {
                productId: item.id
            };
            var success = res => {
                if (res.status == 200) {
                    for (var i = 0; i < this.list.length; i++) {
                        if (this.list[i].id == item.id) {
                            this.list[i].isSubscribe = 1;
                            break;
                        }
                    }
                    modal.toast({
                        message: '收藏成功',
                        duration: 1
                    })
                } else {
                    modal.toast({
                        message: '收藏失败',
                        duration: 1
                    })
                }
            }
            var fail = res => {
                modal.toast({
                    message: '收藏失败',
                    duration: 1
                })
            }
            utils.request(url, params, success, fail);
        },
        unsubscribe(item) {
            if (!utils.checkToken()) {
                return;
            }
            var url = '/yq/user/unsubscribe';
            var params = {
                productId: item.id
            };
            var success = res => {
                if (res.status == 200) {
                    for (var i = 0; i < this.list.length; i++) {
                        if (this.list[i].id == item.id) {
                            this.list[i].isSubscribe = 0;
                            break;
                        }
                    }
                    modal.toast({
                        message: '取消收藏成功',
                        duration: 1
                    })
                } else {
                    modal.toast({
                        message: '取消收藏失败',
                        duration: 1
                    })
                }
            }
            var fail = res => {
                modal.toast({
                    message: '取消收藏失败',
                    duration: 1
                })
            }
            utils.request(url, params, success, fail);
        },
        clickModel(item) {
            // console.log(item);
            if (item.productId) {
                var params = {
                    path: 'productInfo',
                    data: JSON.stringify({
                        productId: item.productId
                    })
                }
                event.onPush(JSON.stringify(params));
            } else if (item.categoryId) {
                var index = '';
                for (var i = 0; i < this.categories.length; i++) {
                    if (this.categories[i].id === item.categoryId) {
                        index = i;
                        break;
                    }
                }
                if (index !== '') {
                    this.changeIndex(index);
                }
            }
        },
        onGroupSliderChange(e) {
            this.groupSliderIndex = e.index;
        },
        onNewSliderChange(e) {
            this.newSliderIndex = e.index;
        },
        goInfo(item) {
            var params = {
                path: 'productInfo',
                data: JSON.stringify({
                    productId: item.id
                })
            }
            event.onPush(JSON.stringify(params));
        },
        countDowns: function() {
            //-----------倒计时---------
            let endTimeList = [];
            // 将活动的结束时间参数提成一个单独的数组，方便操作
            this.groups.forEach(o => {
                endTimeList.push(o.endTimestamp)
            })
            this.actEndTimeList = endTimeList;
            // 执行倒计时函数
            this.countDown();
        },
        countDown() { //倒计时函数
            // 获取当前时间，同时得到活动结束时间数组
            let newTime = new Date().getTime();
            let endTimeList = this.actEndTimeList;
            let countDownArr = [];

            // 对结束时间进行处理渲染到页面
            endTimeList.forEach(o => {
                let endTime = new Date(o).getTime();
                let obj = null;
                // 如果活动未结束，对时间进行处理
                if (endTime - newTime > 0) {
                    let time = (endTime - newTime) / 1000;
                    // 获取天、时、分、秒
                    let day = parseInt(time / (60 * 60 * 24));
                    let hou = parseInt(time % (60 * 60 * 24) / 3600);
                    let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
                    let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
                    obj = {
                        day: this.timeFormat(day),
                        hou: this.timeFormat(hou),
                        min: this.timeFormat(min),
                        sec: this.timeFormat(sec)
                    }
                } else { //活动已结束，全部设置为'00'
                    obj = {
                        day: '00',
                        hou: '00',
                        min: '00',
                        sec: '00'
                    }
                }
                countDownArr.push(obj);
            })
            // 渲染，然后每隔一秒执行一次倒计时函数
            this.countDownList = countDownArr;
            setTimeout(this.countDown, 1000);
        },
        timeFormat(param) { //小于10的格式化函数
            return param < 10 ? '0' + param : param;
        }
    }
}
</script>
<style scoped>
text {
    font-size: 32px;
}

.page {
    padding-bottom: 150px;
}

.categories-list {
    flex-direction: row;
    width: 750px;
    height: 100px;
}

.categories-item {
    padding: 20px;
    flex-direction: row;
    align-items: center;
    height: 100px;
}

.categories-item-text {
    color: #888;
}

.categories-item-text-selected {
    color: #333;
    font-weight: bold;
}

.slider {
    width: 750px;
    height: 400px;
    margin-bottom: 70px;
}

.frame {
    width: 750px;
    height: 400px;
    position: relative;
}

.image {
    width: 750px;
    height: 400px;
}

.indicator {
    position: absolute;
    height: 60px;
    bottom: 0;
    left: 0;
    right: 0;
    item-color: rgba(0, 0, 0, 0.3);
    item-selected-color: rgba(0, 0, 0, 0.6);
}

.box {
    width: 750px;
    height: 400px;
    margin-bottom: 70px;
    flex-direction: row;
}

.box-left {
    width: 375px;
    height: 400px;
    flex-direction: column;
}

.box-left-1 {
    position: relative;
    width: 375px;
    height: 250px;
    background-color: #cceeb9;
}

.box-left-2 {
    position: relative;
    width: 375px;
    height: 150px;
    background-color: #b6caf2;
}

.box-right {
    position: relative;
    width: 375px;
    height: 400px;
    background-color: #f9b2c6;
    flex-direction: row;
    flex-wrap: wrap;
}

.box-right-item {
    width: 187.5px;
    height: 200px;
}

.mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000;
    opacity: 0.3;
}

.box-text {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 20px;
    color: #fff;
    font-size: 26px;
}

.groups {
    flex-direction: column;
    margin-bottom: 70px;
}

.block-header {
    width: 750px;
    padding: 0 30px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.block-title {
    flex-direction: row;
    align-items: center;
}

.block-title-text-1 {
    color: #333;
    font-size: 40px;
    font-weight: bold;
}

.block-title-text-2 {
    color: #aaa;
}

.text-indicator {
    flex-direction: row;
    align-items: center;
}

.text-indicator-1 {
    color: #333;
    font-size: 36px;
}

.text-indicator-2 {
    color: #888;
}

.slider2 {
    width: 750px;
    height: 300px;
}

.frame2 {
    width: 750px;
    height: 260px;
    padding: 30px;
    position: relative;
    flex-direction: row;
    justify-content: space-between;
}

.image2 {
    width: 200px;
    height: 200px;
}

.group-info {
    align-items: flex-end;
}

.group-countdown {
    padding: 5px 20px;
    background-color: #f5f5f5;
    border-top-left-radius: 1000px;
    border-bottom-left-radius: 1000px;
    margin-bottom: 25px;
}

.group-countdown-text {
    font-size: 28px;
}

.group-title {
    margin-bottom: 15px;
}

.group-title-text {
    font-size: 32px;
    font-weight: bold;
}

.group-price {
    flex-direction: row;
    align-items: flex-end;
}

.group-price-1 {
    font-size: 28px;
    text-decoration: line-through;
    color: #aaa;
    margin-right: 5px;
}

.group-price-2 {
    font-size: 32px;
    color: red;
}

.new {
    flex-direction: column;
    margin-bottom: 70px;
}

.new-list {
    width: 750px;
    flex-direction: row;
}

.new-item {
    width: 580px;
    padding: 30px 0 30px 30px;
    position: relative;
}

.new-item-img {
    width: 550px;
    height: 550px;
}

.new-item-info {
    padding-top: 10px;
}

.new-item-title {
    margin-bottom: 5px;
}

.new-item-title-text {
    font-weight: bold;
}

.new-item-subtitle {
    margin-bottom: 20px;
}

.new-item-subtitle-text {
    color: #888;
    font-size: 30px;
}

.new-item-price {}

.new-item-price-text {
    font-size: 30px;
}

.hot {
    flex-direction: column;
    margin-bottom: 70px;
}

.hot-list {
    padding: 30px 0;
    flex-direction: row;
    flex-wrap: wrap;
}

.hot-item {
    width: 360px;
    padding: 30px 0 30px 30px;
}

.hot-item-img {
    width: 330px;
    height: 450px;
    margin-bottom: 10px;
}

.hot-item-title {
    margin-bottom: 20px;
}

.hot-item-title-text {
    font-weight: bold;
}

.hot-item-price {}

.hot-item-price-text {
    font-size: 30px;
}

.category-img {
    width: 750px;
    height: 250px;
}

.product-list {
    flex-direction: row;
    flex-wrap: wrap;
}

.product-item {
    padding-left: 30px;
    width: 360px;
    flex-direction: column;
    margin-bottom: 30px;
}

.product-item-img {
    width: 330px;
    height: 450px;
    margin-bottom: 10px;
}

.product-item-content {
    flex-direction: row;
    justify-content: space-between;
}

.product-item-info {}

.product-item-title {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 20px;
    max-width: 300px;
}

.product-item-star {}

.product-item-price {
    font-size: 24px;
}
</style>